<template>
	<view class="outer_box">
		<view class="tuotu-background">

		</view>
		<view class="background">
			<view class="title">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/biaoti1.png" mode=""></image>
			</view>
			<view class="describe-1">
				<view class="">
					每月可免费享受一次门诊陪伴服务
				</view>
			</view>
			<view class="title">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/biaoti2.png" mode=""></image>
			</view>
			<view class="describe-2">
				<view class="describe-2v">
					<text class="">
						开通会员后，每月需要固定充值600元，以此保证能够正常享受会员权益，若超过规定时间(自充值日起30天)未充值，将不可免费使用门诊陪伴服务，会员账户余额仍可在商城消费使用；保留补全充值金额，即可重新激活会员权益的机会
					</text>
				</view>
			</view>
			<view class="title">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/biaoti3.png" mode=""></image>
			</view>
			<view class="describe-3">
				<view class="describe-3v">
					<view class="">会员姓名</view>
					<input class="input" v-model="name">
					</input>
					<view class="">身份证号</view>
					<input class="input" v-model="idCard">
					</input>
				</view>
			</view>
			<view class="agreement-box">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/gouxuan.png" mode=""></image>
				<view class="">已阅读并同意 </view>
				<view class="">《会员服务协议》</view>
				<view class="">、</view>
				<view class="">《用户隐私协议》</view>
			</view>
			<view class="open-box">
				<view class="open-btn" @tap="openusermember">
					￥365元/开通会员

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				name:'',
				idCard:''
			}
		},
		computed: mapState(['userInfo','loginState']),
		methods: {
			// 获取用户信息
			getUserInfo() {
				this.$api_http.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			//开通会员
			openusermember() {
				console.log(this.userInfo.userInfo.userId)
				this.$api_http.openusermember({
					// userId:this.userInfo.userInfo.userId,
					payType:'JSAPI',
					name:this.name,
					idCard:this.idCard
				}).then((res) => {
					if(res.data.code = 200){
						if(res.data.success){
							uni.requestPayment({
								appId:res.data.dataMap.appid,
							    provider: 'wxpay',
							    timeStamp:res.data.dataMap.timeStamp,
							    nonceStr: res.data.dataMap.nonceStr,
							    package: res.data.dataMap.package,
							    signType: 'MD5',
							    paySign: res.data.dataMap.paySign,
							    success: function (res) {
							        console.log('success:' + JSON.stringify(res));
									uni.showToast({
										title: '开通成功',
										duration: 500,
										icon: "none"
									});
									uni.navigateBack(1)
							    },
							    fail: function (err) {
							        console.log('fail:' + JSON.stringify(err));
							    }
							});
						}else{
							uni.showToast({
								title: res.data.message,
								duration: 500,
								icon: "none"
							});
						}
						console.log(res.data.dataMap)
					}
			
				})
			
			},
		}
	}
</script>

<style lang="less" scoped>
	.outer_box {

		.tuotu-background {
			width: 100%;
			height: 659rpx;
			background-image: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/toutu.png);
			background-size: 100%;
			position: relative;
		}

		.background {
			width: 100%;
			height: 1416rpx;
			background-image: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/bg.png);
			background-size: 100%;
			position: relative;
			.open-box {
				display: flex;
				padding: 0 50rpx;
				margin-top: 40rpx;
				.open-btn{
					width: 640rpx;
					height: 100rpx;
					border-radius: 50rpx;
					background: linear-gradient(90deg, #EFE0B0 0%, #DDA265 100%);
					text-align: center;
					line-height: 100rpx;
					font-size: 32rpx;
					color: #fff;	
				}
				
			}
			.agreement-box {
				display: flex;
				padding: 0 50rpx;
				margin-top: 40rpx;
				align-items: center;
				justify-content: center;

				view:nth-child(2) {
					color: #6A6A75;
					font-size: 24rpx;
				}

				view:nth-child(3) {
					color: #F8D6A8;
					font-size: 24rpx;
				}

				view:nth-child(4) {
					color: #F8D6A8;
					font-size: 24rpx;
				}

				view:nth-child(5) {
					color: #F8D6A8;
					font-size: 24rpx;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					margin: 0 15rpx;
				}
			}

			.describe-3 {
				display: flex;
				padding: 0 50rpx;
				align-items: center;
				color: #F8D6A8;

				.describe-3v {
					width: 100%;
					background: #3E3B45;
					border: 2rpx solid #F8D6A8;
					border-radius: 12rpx;
					padding: 20rpx 60rpx;

					.input {
						margin: 30rpx 0;
						width: 100%;
						height: 70rpx;
						background: #3E3B45;
						border: 2rpx solid #F8D6A8;
						border-radius: 12rpx;
						text-align: center;
					}

				}
			}

			.describe-2 {
				display: flex;
				padding: 0 50rpx;
				align-items: center;

				.describe-2v {
					width: 100%;
					background: linear-gradient(90deg, #3E3B45 0%, #24232A 100%);
					border-radius: 20rpx;
					color: #CCCCCC;
					font-size: 24rpx;
					padding: 30rpx;


				}

			}

			.describe-1 {
				display: flex;
				padding: 0 50rpx;

				view {
					width: 100%;
					height: 160rpx;
					background: linear-gradient(90deg, #3E3B45 0%, #24232A 100%);
					border-radius: 20rpx;
					color: #CCCCCC;
					font-size: 32rpx;
					text-align: center;
					line-height: 160rpx;
				}

			}

			.title {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;

				image {
					width: 414rpx;
					height: 35rpx;
				}

			}
		}
	}
</style>
